<template>
  <div class="BoardComponent">
<!--    {{ winnerLine }}-->
    <SquareComponent
      v-for="(item, index) of results"
      :key="index"
      :index="index"
      :val="item"
      :class="{ red: winnerLine.includes(index) }"
      @click-square="handleClick"
    />
  </div>
</template>

<script>
import SquareComponent from "@/components/SquareComponent";

export default {
  name: "BoardComponent",
  props: {
    results: {
      type: Array,
      required: true
    },
    winnerLine: {
      type: Array,
      default: () => []
    }
  },
  components: {
    SquareComponent
  },
  methods: {
    handleClick(index) {
      this.$emit("click-square", index)
    }
  }
}
</script>

<!--
scoped 会给当前组件的所有标签添加 样式一个作用域
样式作用域的实现：给每个标签添加 data-v-345678iugfd 属性
h1[data-v-345678iugfd] {
}
-->
<style scoped>
h1 {
  color: red;
}

.BoardComponent {
  display: flex;
  flex-wrap: wrap;
  width: 210px;
}

.red {
  background-color: red;
}
</style>
<style>
body {
  background-color: #42b983;
}
</style>
